<template>
    <div class="app-container workbench" ref="appContainer" >
        <!-- 招呼语 -->
        <div class="greetingBox">
            <p class="text1">{{userName}}，贵州华电黔西花溪水风互补风电项目安全管控平台系统</p>
            <p class="text2">已为您准备了常用功能</p>
        </div>

        <!-- 菜单 -->
        <div class="content">
            <!-- 项目人员管理-视频监控管理-绿色施工管理 -->
            <el-row>
                <!-- 项目人员管理 -->
                <div class="menuGroup" v-if="menuGroupData[0].menus.length>0">
                    <div class="groupTitle">
                        <div class="title">{{ menuGroupData[0].value }}</div>
                        <div class="line"></div>
                    </div>
                    <div class="menuBox">
                        <div class="menu" @click="handleClick(item)" v-for="item in menuGroupData[0].menus" :key="item.id">
                            <img class="menuIcon" :src="item.selectIcon" />
                            <div class="menuMsg">
                                <div class="menuName">
                                    <div class="name">{{ item.title }}</div>
                                    <!-- <div class="supervise" :class="getClassNameBySupervise(item.supervise)">{{ item.supervise | getSuperviseName }}</div> -->
                                </div>
                                <div class="menuContent">{{ item.content }}</div>
                            </div>
                            <!-- <div class="openState" :class="{unopen: item.openStatus==1}">{{ item.openStatus==1?"申请开通":"已开通" }}</div> -->
                        </div>
                    </div>
                </div>
                <!-- 视频监控管理 -->
                <div class="menuGroup" v-if="menuGroupData[1].menus.length>0">
                    <div class="groupTitle">
                        <div class="title">{{ menuGroupData[1].value }}</div>
                        <div class="line"></div>
                    </div>
                    <div class="menuBox">
                        <div class="menu" @click="handleClick(item)" v-for="item in menuGroupData[1].menus" :key="item.id">
                            <img class="menuIcon" :src="item.selectIcon" />
                            <div class="menuMsg">
                                <div class="menuName">
                                    <div class="name">{{ item.title }}</div>
                                    <!-- <div class="supervise" :class="getClassNameBySupervise(item.supervise)">{{ item.supervise | getSuperviseName }}</div> -->
                                </div>
                                <div class="menuContent">{{ item.content }}</div>
                            </div>
                            <!-- <div class="openState" :class="{unopen: item.openStatus==1}">{{ item.openStatus==1?"申请开通":"已开通" }}</div> -->
                        </div>
                    </div>
                </div>
                <!-- 绿色施工管理 -->
                <div class="menuGroup" v-if="menuGroupData[2].menus.length>0">
                    <div class="groupTitle">
                        <div class="title">{{ menuGroupData[2].value }}</div>
                        <div class="line"></div>
                    </div>
                    <div class="menuBox">
                        <div class="menu" @click="handleClick(item)" v-for="item in menuGroupData[2].menus" :key="item.id">
                            <img class="menuIcon" :src="item.selectIcon" />
                            <div class="menuMsg">
                                <div class="menuName">
                                    <div class="name">{{ item.title }}</div>
                                    <!-- <div class="supervise" :class="getClassNameBySupervise(item.supervise)">{{ item.supervise | getSuperviseName }}</div> -->
                                </div>
                                <div class="menuContent">{{ item.content }}</div>
                            </div>
                            <!-- <div class="openState" :class="{unopen: item.openStatus==1}">{{ item.openStatus==1?"申请开通":"已开通" }}</div> -->
                        </div>
                    </div>
                </div>
            </el-row>

            <!-- 安全生产管理 -->
            <el-row>
                <div class="menuGroup flex-1" v-if="menuGroupData[3].menus.length>0">
                    <div class="groupTitle">
                        <div class="title">{{ menuGroupData[3].value }}</div>
                        <div class="line"></div>
                    </div>
                    <div class="menuBox">
                        <div class="menu" @click="handleClick(item)" v-for="item in menuGroupData[3].menus" :key="item.id">
                            <img class="menuIcon" :src="item.selectIcon" />
                            <div class="menuMsg">
                                <div class="menuName">
                                    <div class="name">{{ item.title }}</div>
                                    <!-- <div class="supervise" :class="getClassNameBySupervise(item.supervise)">{{ item.supervise | getSuperviseName }}</div> -->
                                </div>
                                <div class="menuContent">{{ item.content }}</div>
                            </div>
                            <!-- <div class="openState" :class="{unopen: item.openStatus==1}">{{ item.openStatus==1?"申请开通":"已开通" }}</div> -->
                        </div>
                    </div>
                </div>
            </el-row>

            <!-- 现场物料管理 -->
            <el-row>
                <div class="menuGroup flex-1" v-if="menuGroupData[4].menus.length>0">
                    <div class="groupTitle">
                        <div class="title">{{ menuGroupData[4].value }}</div>
                        <div class="line"></div>
                    </div>
                    <div class="menuBox">
                        <div class="menu" @click="handleClick(item)" v-for="item in menuGroupData[4].menus" :key="item.id">
                            <img class="menuIcon" :src="item.selectIcon" />
                            <div class="menuMsg">
                                <div class="menuName">
                                    <div class="name">{{ item.title }}</div>
                                    <!-- <div class="supervise" :class="getClassNameBySupervise(item.supervise)">{{ item.supervise | getSuperviseName }}</div> -->
                                </div>
                                <div class="menuContent">{{ item.content }}</div>
                            </div>
                            <!-- <div class="openState" :class="{unopen: item.openStatus==1}">{{ item.openStatus==1?"申请开通":"已开通" }}</div> -->
                        </div>
                    </div>
                </div>
            </el-row>

            <!-- 现场施工质量管控 -->
            <el-row>
                <div class="menuGroup flex-1" v-if="menuGroupData[5].menus.length>0">
                    <div class="groupTitle">
                        <div class="title">{{ menuGroupData[5].value }}</div>
                        <div class="line"></div>
                    </div>
                    <div class="menuBox">
                        <div class="menu" @click="handleClick(item)" v-for="item in menuGroupData[5].menus" :key="item.id">
                            <img class="menuIcon" :src="item.selectIcon" />
                            <div class="menuMsg">
                                <div class="menuName">
                                    <div class="name">{{ item.title }}</div>
                                    <!-- <div class="supervise" :class="getClassNameBySupervise(item.supervise)">{{ item.supervise | getSuperviseName }}</div> -->
                                </div>
                                <div class="menuContent">{{ item.content }}</div>
                            </div>
                            <!-- <div class="openState" :class="{unopen: item.openStatus==1}">{{ item.openStatus==1?"申请开通":"已开通" }}</div> -->
                        </div>
                    </div>
                </div>
            </el-row>

            <!-- 能源管理 -->
            <el-row>
                <div class="menuGroup flex-1" v-if="menuGroupData[6].menus.length>0">
                    <div class="groupTitle">
                        <div class="title">{{ menuGroupData[6].value }}</div>
                        <div class="line"></div>
                    </div>
                    <div class="menuBox">
                        <div class="menu" @click="handleClick(item)" v-for="item in menuGroupData[6].menus" :key="item.id">
                            <img class="menuIcon" :src="item.selectIcon" />
                            <div class="menuMsg">
                                <div class="menuName">
                                    <div class="name">{{ item.title }}</div>
                                    <!-- <div class="supervise" :class="getClassNameBySupervise(item.supervise)">{{ item.supervise | getSuperviseName }}</div> -->
                                </div>
                                <div class="menuContent">{{ item.content }}</div>
                            </div>
                            <!-- <div class="openState" :class="{unopen: item.openStatus==1}">{{ item.openStatus==1?"申请开通":"已开通" }}</div> -->
                        </div>
                    </div>
                </div>
            </el-row>

            <!-- 过程可视化管控 -->
            <el-row>
                <div class="menuGroup flex-1" v-if="menuGroupData[7].menus.length>0">
                    <div class="groupTitle">
                        <div class="title">{{ menuGroupData[7].value }}</div>
                        <div class="line"></div>
                    </div>
                    <div class="menuBox">
                        <div class="menu" @click="handleClick(item)" v-for="item in menuGroupData[7].menus" :key="item.id">
                            <img class="menuIcon" :src="item.selectIcon" />
                            <div class="menuMsg">
                                <div class="menuName">
                                    <div class="name">{{ item.title }}</div>
                                    <!-- <div class="supervise" :class="getClassNameBySupervise(item.supervise)">{{ item.supervise | getSuperviseName }}</div> -->
                                </div>
                                <div class="menuContent">{{ item.content }}</div>
                            </div>
                            <!-- <div class="openState" :class="{unopen: item.openStatus==1}">{{ item.openStatus==1?"申请开通":"已开通" }}</div> -->
                        </div>
                    </div>
                </div>
            </el-row>

            <!-- 信息化协同办公 -->
            <el-row>
                <div class="menuGroup flex-1" v-if="menuGroupData[8].menus.length>0">
                    <div class="groupTitle">
                        <div class="title">{{ menuGroupData[8].value }}</div>
                        <div class="line"></div>
                    </div>
                    <div class="menuBox">
                        <div class="menu" @click="handleClick(item)" v-for="item in menuGroupData[8].menus" :key="item.id">
                            <img class="menuIcon" :src="item.selectIcon" />
                            <div class="menuMsg">
                                <div class="menuName">
                                    <div class="name">{{ item.title }}</div>
                                    <!-- <div class="supervise" :class="getClassNameBySupervise(item.supervise)">{{ item.supervise | getSuperviseName }}</div> -->
                                </div>
                                <div class="menuContent">{{ item.content }}</div>
                            </div>
                            <!-- <div class="openState" :class="{unopen: item.openStatus==1}">{{ item.openStatus==1?"申请开通":"已开通" }}</div> -->
                        </div>
                    </div>
                </div>
            </el-row>

            <!-- 其他 -->
            <el-row>
                <div class="menuGroup flex-1" v-if="menuGroupData[9].menus.length>0">
                    <div class="groupTitle">
                        <div class="title">{{ menuGroupData[9].value }}</div>
                        <div class="line"></div>
                    </div>
                    <div class="menuBox">
                        <div class="menu" @click="handleClick(item)" v-for="item in menuGroupData[9].menus" :key="item.id">
                            <img class="menuIcon" :src="item.selectIcon" />
                            <div class="menuMsg">
                                <div class="menuName">
                                    <div class="name">{{ item.title }}</div>
                                    <!-- <div class="supervise" :class="getClassNameBySupervise(item.supervise)">{{ item.supervise | getSuperviseName }}</div> -->
                                </div>
                                <div class="menuContent">{{ item.content }}</div>
                            </div>
                            <!-- <div class="openState" :class="{unopen: item.openStatus==1}">{{ item.openStatus==1?"申请开通":"已开通" }}</div> -->
                        </div>
                    </div>
                </div>
            </el-row>
        </div>
    </div>
</template>

<script>
import { getExternalConfig } from "@/api/api"
import { superviseOptions, appSceneOptions } from "@/util/selectOption"
export default {
    name: "workbench",
    data() {
        return {
            deptId: "",
            userName: "",
            menuGroupData: [],
        }
    },
    created() {
        this.userName = localStorage.getItem("username");
        this.menuDataProcessing()
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;

        // 计算缩放后的容器尺寸（原始尺寸 * 缩放比例）
        const scale = 0.8;
        const originalWidth = window.innerWidth;
        const originalHeight = window.innerHeight;

        // 设置容器缩放后的尺寸，避免滚动条异常
        appContainer.value.style.width = `${originalWidth / scale}px`;
        appContainer.value.style.height = `${originalHeight / scale}px`;
    },
    methods: {
        // 菜单数据处理
        menuDataProcessing() {
            let menuData = this.$store.state.ruleList
            let appSceneData = appSceneOptions
            // 步骤1：创建分组映射（使用Map确保键值类型一致性）
            const sceneMap = new Map()
            appSceneData.forEach((scene) => {
                // 初始化每个场景的分组数组
                sceneMap.set(scene.key, [])
            })

            // 步骤2：初始化未分类项容器
            const unclassified = []

            // 步骤3：遍历所有菜单项进行分组
            menuData.forEach((item) => {
                const sceneKey = item.appScene
                // 处理空值或无效值
                if (!sceneKey) {
                    unclassified.push(item)
                    return
                }

                // 尝试解析为数字
                const keyNum = parseInt(sceneKey)
                // 验证是否为有效数字且在场景中存在
                if (!isNaN(keyNum) && sceneMap.has(keyNum)) {
                    sceneMap.get(keyNum).push(item)
                } else {
                    unclassified.push(item)
                }
            })

            // 步骤4：构建最终分组结果
            const result = appSceneData.map((scene) => ({
                key: scene.key,
                value: scene.value,
                menus: sceneMap.get(scene.key), // 获取对应分组的菜单项
            }))

            // 步骤5：添加未分类分组（如果有）
            if (unclassified.length > 0) {
                result.push({
                    key: "unclassified",
                    value: "其他",
                    menus: unclassified,
                })
            }
            this.menuGroupData = result
        },

        // 根据监管要求获取class名
        getClassNameBySupervise(supervise){
            let className = ""
            if(supervise==1){
                className = "n1"
            }else if(supervise==2){
                className = "n2"
            }else if(supervise==3){
                className = "n3"
            }
            return className
        },

        // 跳转
        handleClick(item) {
            // 外链
            if (item.pageType === 2) {
                if (item.url.includes("developing")) {
                    this.$confirm("您暂无权限访问，如需使用请联系系统管理员开通！", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {})
                } else {
                    this.getConfig(item)
                }
            }else if(item.openStatus==1){
                this.$confirm("如需使用请联系系统管理员开通！", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {})
            } else {
                if (item.children.length > 0) {
                    this.$store.commit("setModalPage", item.children)
                    localStorage.setItem("pathId", item.children[0].id)
                    if (item.children[0].children.length > 0) {
                        this.$router.push({
                            path: item.children[0].children[0].url,
                        })
                        localStorage.setItem("pathChildId", item.children[0].children[0].id)
                        this.$store.commit("setModalChildPage", item.children[0].children)

                        let routeHistory = JSON.parse(localStorage.getItem("routeHistory")) || []
                        const index = routeHistory.findIndex((v) => v.id === item.children[0].children[0].id)
                        if (index === -1) {
                            routeHistory.push(item.children[0].children[0])
                            localStorage.setItem("routeHistory", JSON.stringify(routeHistory))
                        }
                    } else {
                        localStorage.setItem("pathChildId", item.children[0].id)
                        this.$router.push({ path: item.children[0].url })

                        let routeHistory = JSON.parse(localStorage.getItem("routeHistory")) || []
                        const index = routeHistory.findIndex((v) => v.id === item.children[0].id)
                        if (index === -1) {
                            routeHistory.push(item.children[0])
                            localStorage.setItem("routeHistory", JSON.stringify(routeHistory))
                        }
                    }
                }else{
                    this.$message.warning("未配置子菜单")
                }
            }
        },

        /* 获取外链配置 */
        getConfig(item) {
            let params = {
                deptId: this.deptId,
                platform: item.code,
            }
            getExternalConfig(params)
                .then((res) => {
                    if (res.code == 200) {
                        let url
                        if (item.code === "nut") {
                            // 智能螺母
                            url = `${item.url}?account=${res.data.extUserName}&cert=${res.data.extPassword}&redirect=%2Flmdatav`
                        } else if (item.code === "plan") {
                            // 进度管理
                            url = `${item.url}&code=${res.data.extPassword}`
                        } else if (item.code === "broadcast") {
                            // 智能广播
                            url = `${item.url}?username=${res.data.extUserName}&passwd=${res.data.extPassword}`
                        } else {
                            url = item.url
                        }
                        var newwindow = window.open("_blank")
                        newwindow.location = url
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
    },
    filters: {
        getSuperviseName(supervise){
            let name = ""
            if(supervise==1){
                name = "N1"
            }else if(supervise==2){
                name = "N2"
            }else if(supervise==3){
                name = "创优"
            }
            return name
        }
    }
}
</script>

<style scoped lang="scss">
    /* 根容器样式 */
    .app-container {
        width: 120vw;
        /* 缩放 80% */
        transform: scale(0.8);
        /* 缩放原点：左上角（与浏览器缩放一致） */
        transform-origin: top left;
        /* 避免缩放后页面偏移 */
        margin: 0 auto;
        /* 确保容器占满视口（缩放前） */
        overflow: hidden;
    }
.workbench {
    margin-top: 6px;
    padding: 45px;
    background-color: #ffffff;
    .greetingBox {
        margin-bottom: 40px;
        .text1 {
            font-size: 36px;
            color: #333333;
            line-height: 1;
        }
        .text2 {
            margin-top: 25px;
            font-size: 20px;
            color: #828282;
            line-height: 1;
        }
    }
    .content{
        .el-row{
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;

            .menuGroup{
                margin-right: 25px;
                &:last-of-type{
                    margin-right: 0;
                }
                .groupTitle{
                    display: flex;
                    align-items: center;
                    .title{
                        font-size: 28px;
                        color: #acacac;
                        line-height: 1;
                    }
                    .line{
                        flex: 1;
                        margin-left: 15px;
                        height: 1px;
                        background-color: #e8e8e8;
                    }
                }
                .menuBox{
                    width: 100%;
                    margin-top: 30px;
                    display: flex;
                    flex-wrap: wrap;
                    .menu{
                        // flex: 1;
                        margin-right: 25px;
                        margin-bottom: 30px;
                        padding: 25px;
                        width: 410px;
                        height: 184px;
                        border-radius: 15px;
                        background-color: #ffffff;
                        box-sizing: border-box;
                        box-shadow: 1px 1px 10px 0px rgba(60, 60, 60, 0.29);
                        display: flex;
                        position: relative;
                        cursor: pointer;
                        &:last-of-type{
                            margin-right: 0;
                        }
                        &:hover{
                            background-color: rgba(245, 250, 255, 1);
                            box-shadow: 1px 1px 10px 0px rgba(143, 201, 255, 1);
                        }
                        .menuIcon{
                            // width: 120px;
                            // height: 120px;
                            width: 100px;
                            height: 100px;
                        }
                        .menuMsg{
                            margin-left: 18px;
                            .menuName{
                                display: flex;
                                .name{
                                    font-size: 28px;
                                    color: #333333;
                                    line-height: 1;
                                }
                                .supervise{
                                    margin-left: 12px;
                                    padding: 0 5px;
                                    height: 28px;
                                    border-radius: 5px 5px 5px 0;
                                    box-sizing: border-box;
                                    font-size: 14px;
                                    color: #ffffff;
                                    text-align: center;
                                    line-height: 28px;
                                }
                                .n1{
                                    background-color: #2cb88e;
                                }
                                .n2{
                                    background-color: #4066db;
                                }
                                .n3{
                                    background-color: #fa746b;
                                }
                            }
                            .menuContent{
                                margin-top: 3px;
                                font-size: 16px;
                                color: #acacac;
                            }
                        }
                        .openState{
                            position: absolute;
                            right: 20px;
                            bottom: 20px;
                            width: 88px;
                            height: 40px;
                            border-radius: 5px;
                            border: 1px solid #c6c6c6;
                            box-sizing: border-box;
                            color: #acacac;
                            text-align: center;
                            line-height: 38px;
                        }
                        .unopen{
                            color: #4074f1;
                            border-color: #4074f1;
                        }
                    }
                }
            }
            .flex-1{
                flex: 1;
            }
            .flex-2{
                flex: 2;
            }
        }
    }
}
</style>
